前言

昨天分享了從Amos老師的YouTube影片練習，雖然練習完之後CSS的觀念、切版技巧提升不少，但依然還是會好奇，如果是整頁式的網頁，我應該如何切版呢？

在饅頭計畫的參與中，我最喜歡的是Luka會提供不少自己找資源學習的技巧、也會設定每個單元要完成的任務。在CSS單元內，要求我們到Udemy 或 YouTube 尋找能製作出專案的課程。
在這個階段的任務，挑選Udemy : Build Responsive Real World Websites with HTML5 and CSS3

課程重點

製作的網站為健康餐點網站，將網站分為表頭、特色區塊、食物照片區、訂餐方法介紹…等，切分不同區塊，去調整字型、文字排版、圖片處理。

成品

每個區塊繪製簡單的容器配置圖

課程中老師會先說明區塊內容器的放置，我也可以很快地抓出要製作的方向，幫助我未來在看到網頁時，會先拆分大區域，再從每個區域來劃分容器的配置。
課程範例：

1. Header區
   
2. 特色區塊
   

class 命名清楚

區分好幾個section，並將每個section清楚命名，容易辨認。透過此課程，讓我知道好的class命名，可以幫助你快速知道這區塊要做什麼，再過段時間回來查找也相對容易。
如：
section-features ： 放置餐點的特色介紹。
section-maels ： 呈現餐點的圖片
section-cities ： 放置有合作的城市、參與人數等資訊

版面色調挑選

網頁中，很快的吸引人目光除了整體的版面配置外，另一個就是顏色的配置，可以透過色調網站去挑選合適的色彩。
課程中，老師會到Tint and Shade Generator 挑選於找尋合適的顏色。

此課程比較完整細節的部分可以到我的 部落格 看看～

小結

這兩天關於 CSS 的練習，大月就花了我一個多月吧～ 過程中，會覺的會不會花太多時間在這裡啦，後面還有好多新東西等著，但是總想著要將基礎打好，不要心急，才不會東缺一塊，西缺一塊的。而且回過頭來看，也確實成長不少！